<div class="tab-wrap" id="mediaWrap" style="display: block">
    <#if isUnlocked == false>
        <div class="lock-tips">
            <div class="title">
                Below is a sample report. This feature only available to <em>PRO</em> version or higher.
                <br>
                Please use credit to unlock the report or upgrade your membership.
            </div>
            <div class="right">
                <button class="gd-btn btn-default">Unlock</button>
                <button class="gd-btn btn-info">Upgrade</button>
            </div>
        </div>
        <#if isMobile == false>
            <img class="demo-img" src="${request.contextPath}/static/img/ins/Brand-Media-Web.png" alt="sample report">
        <#else>
            <img class="demo-img" src="${request.contextPath}/static/img/ins/Brand-Media-Mobile.png"
                 srcset="${request.contextPath}/static/img/ins/Brand-Media-Mobile@2x.png 2x" alt="sample report">
        </#if>
    <#else>
        <ul class="date-tab">
            <li class="date-tab-item" value="0">7 Days</li>
            <li class="date-tab-item" value="1">15 Days</li>
            <li class="date-tab-item is-active" value="2">30 Days</li>
        </ul>
        <div class="wrap-item">
            <div class="wrap-item__title">
                Media Performance
                <div class="gd-popover"
                     content="<dl class='modal-tip'>
                <dt>1. Post</dt>
                <dd>The number of media posts tagged/mentioned the brand or product of the brand,<#if isMobile == false><br></#if>and the media posted by the brand official accounts in the selected period.</dd>
                <dt>2. Views</dt>
                <dd>The number of views on all the brand related video posts in the selected period.</dd>
                <dt>3. Likes</dt>
                <dd>The number of likes on all the brand related media posts in the selected period.</dd>
                <dt>4. Reviews</dt>
                <dd>The number of reviews on all the brand related media posts in the selected period.</dd>
                <dt>5. Engagements</dt>
                <dd>The number of likes and reviews on all the brand related media posts in the selected period.</dd>
            </dl>">
                    <i class="iconfont iconfaq"></i>
                </div>
            </div>
            <div class="wrap-item__inner">
                <div class="grid-data-list row-5 m-row-2" id="mediaBaseInfo">
                    <div class="grid-data-item">
                        <div class="title">
                            Post
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Views
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Likes
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Reviews
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Engagements
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrap-item">
            <div class="wrap-item__title">Data Trend</div>
            <div class="wrap-item__inner">
                <div class="trend-wrap" id="dataTrend"></div>
            </div>
        </div>
        <div class="wrap-item">
            <div class="wrap-item__title">
                Media List
                <div class="right">
                    <div class="gd-select" id="mediaSortSelect">
                        <div class="gd-select-title">
                            <div class="label">Hottest</div>
                            <i class="iconfont icondown1"></i>
                        </div>
                        <div class="gd-select-wrap">
                            <ul>
                                <li class="gd-option">Hottest</li>
                                <li class="gd-option" value="1">Latest</li>
                            </ul>
                        </div>
                    </div>
                    <div class="filter">
                        Filter
                        <i class="iconfont iconfilter-list"></i>
                    </div>
                </div>
            </div>
            <div class="wrap-item__inner">
                <#if isMobile == false>
                    <div class="inner-header">
                        <div class="header__left">
                            <div class="gd-btn-select">
                                <ul class="btn-select">
                                    <li class="btn-select-item is-active" value="0">All</li>
                                    <li class="btn-select-item" value="1">Image</li>
                                    <li class="btn-select-item" value="2">Video</li>
                                    <li class="btn-select-item" value="3">Reels</li>
                                    <li class="btn-select-item" value="4">IGTV</li>
                                </ul>
                            </div>
                        </div>
                        <div class="header__center">
                            <p class="sub-title">Other Info:</p>
                            <div class="gd-checkbox-group" id="mediaCheck">
                                <div class="gd-checkbox">
                                    <input type="checkbox">
                                    <div class="label input-margin" value="0">Sponsored</div>
                                </div>
                                <div class="gd-checkbox">
                                    <input type="checkbox">
                                    <div class="label input-margin" value="1">Business Tagging</div>
                                </div>
                                <div class="gd-checkbox">
                                    <input type="checkbox">
                                    <div class="label input-margin" value="2">Product Tagging</div>
                                </div>
                            </div>
                        </div>
                        <div class="header__right">
                            <ul class="base-select">
                                <li class="is-active">Hottest</li>
                                <li>Latest</li>
                            </ul>
                        </div>
                    </div>
                </#if>
                <div class="grid-list" id="mediaList">
                    <div class="grid-list__inner row-4"></div>
                    <div class="grid-list__footer">
                        <span>View More</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="filter-wrap">
            <div class="filter-body">
                <div class="search-item">
                    <div class="content">
                        <div class="gd-btn-select select-item">
                            <div class="label" id="media-lable">Media Type</div>
                            <ul class="btn-select" data-param-key="type">
                                <li class="btn-select-item is-active" value="0">All</li>
                                <li class="btn-select-item" value="1">Image</li>
                                <li class="btn-select-item" value="2">Video</li>
                                <li class="btn-select-item" value="3">IGTV</li>
                                <li class="btn-select-item" value="4">Reels</li>
                            </ul>
                        </div>
                        <div class="select-item">
                            <div class="select-title">Other Info</div>
                            <div class="gd-checkbox-group vertical" id="mediaAccount">
                                <div class="gd-checkbox" value="0"><input type="checkbox">
                                    <div class="label">Sponsored</div>
                                </div>
                                <div class="gd-checkbox" value="1"><input type="checkbox">
                                    <div class="label">Business Tagging</div>
                                </div>
                                <div class="gd-checkbox" value="2"><input type="checkbox">
                                    <div class="label">Product Tagging</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="filter-footer">
                <button class="gd-btn btn-default">Clear</button>
                <button class="gd-btn btn-info">Search</button>
            </div>
        </div>
    </#if>
</div>
<script src="${request.contextPath}/static/plugins/echarts.min.js"></script>
<script src="${request.contextPath}/static/js/nums.js"></script>
<script src="${request.contextPath}/static/js/dayjs.min.js"></script>
<script src="${request.contextPath}/static/js/time.js"></script>
<script type="module">
    import { getGridList, troggleActive, openDetail } from "/static/js/common.js"
    import { CheckboxGroup } from '/static/js/gd-ui/checkbox/group.js'
    import { Select } from '/static/js/gd-ui/select/index.es.js'

    const mediaWrap = document.getElementById('mediaWrap')
    let dayType = 2
    const productParam = {
        brandId:'${brand.id?c}',
        dayType: dayType,
        page: 1,
        pageSize: 8,
        sort: 0,
    }

    <#if isUnlocked == true>
    initMedia()
    initEvent()
    </#if>

    function initMedia() {
        getMediaStatis()
        getMediaTrend()
        getMedia()
    }
    function initEvent() {
        // 时间tab选择事件
        mediaWrap.querySelectorAll('.date-tab li').forEach(item => {
            item.addEventListener('click', () => {
                troggleActive(item, () => {
                    dayType = +item.getAttribute('value')
                    productParam.page = 1
                    initMedia()
                })
            })
        })

        mediaWrap.querySelectorAll('.gd-btn-select .btn-select-item').forEach(item => {
            item.addEventListener('click', () => {
                troggleActive(item, () => {
                    const value = +item.getAttribute('value')
                    productParam.mediaType = value
                    if(!gugeeGobal.isMobile) {
                        productParam.page = 1
                        getMedia()
                    }
                })
            })
        })

        mediaWrap.querySelectorAll('.gd-checkbox-group').forEach(item => {
            const checkboxGroup = new CheckboxGroup(item)
            checkboxGroup.setCheckedEvent((element, i) => {
                const isChecked = element.querySelector('input').checked
                switch (i) {
                    case 0:
                        productParam.sponsored = +isChecked
                        break
                    case 1:
                        productParam.business = +isChecked
                        break
                    case 2:
                        productParam.product = +isChecked
                        break
                }
                if(!gugeeGobal.isMobile) {
                    productParam.page = 1
                    getMedia()
                }
            })
            checkboxGroup.init()
        })

        mediaWrap.querySelector('.grid-list__footer span').addEventListener('click', () => {
            productParam.page ++
            getMedia()
        })

        if(gugeeGobal.isMobile) {
            const select = new Select()
            select.setElement(mediaWrap.querySelectorAll('.gd-select'))
            select.setSelectedEvent( event => {
                const value = event.target.getAttribute('value')
                productParam.sort = +value
                productParam.page = 1
                getMedia()
            })
            select.init()

            // filter
            mediaWrap.querySelector('.filter').addEventListener('click', showFilter)
            mediaWrap.querySelector('.filter-wrap .btn-default').addEventListener('click', filterClear)
            mediaWrap.querySelector('.filter-wrap .btn-info').addEventListener('click', filterSearch)
        } else {
            // hottest / lastest 选择
            mediaWrap.querySelectorAll('.base-select li').forEach((item, i) => {
                item.addEventListener('click', () => {
                    troggleActive(item, () => {
                        productParam.sort = i
                        productParam.page = 1
                        getMedia()
                    })
                })
            })
        }
    }

    function getMediaStatis() {
        const wrap = document.getElementById('mediaBaseInfo')
        wrap.showLoading()
        const url = getEncodeUrl('/ins/brand/media/st', {
            brandId:'${brand.id?c}',
            dayType: dayType
        })
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const statis = wrap.querySelectorAll('.sub-title')
                statis[0].innerText = numFormat(res.Data.posts)
                statis[1].innerText = numFormat(res.Data.views)
                statis[2].innerText = numFormat(res.Data.likes)
                statis[3].innerText = numFormat(res.Data.reviews)
                statis[4].innerText = numFormat(res.Data.engagements)
            }
            wrap.hideLoading()
        })
    }
    function getMediaTrend() {
        const wrap = document.getElementById('dataTrend')
        wrap.showLoading()
        const url = getEncodeUrl('/ins/brand/media/trend', {
            brandId:'${brand.id?c}',
            dayType: dayType
        })
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const data = res.Data
                if(data && data.length > 0) {
                    const chart = echarts.init(wrap)
                    const option = {
                        color: ['#8267F1', '#1FDBBE', '#1890FF'],
                        tooltip: {
                            <#if isMobile == true>
                            position: ['50%', 30],
                            </#if>
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        grid: {
                            <#if isMobile == true>
                            top: 40,
                            left: 50,
                            bottom: 25,
                            right: 50,
                            <#else>
                            top: 40,
                            left: 50,
                            bottom: 30,
                            right: 50,
                            </#if>
                        },
                        legend: {
                            data: ['Likes', 'Reviews', 'Posts'],
                            top: 10,
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: data.map(item => item.dateTime),
                                axisTick:{
                                    show:false,//不显示坐标轴刻度线
                                    lineStyle: {
                                        color: 'rgba(0,0,0,.45)' //刻度颜色
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(0,0,0,.45)'
                                    }
                                },
                                axisPointer: {
                                    type: 'shadow'
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel: {
                                    formatter: (val) => {
                                        return numFormat(val)
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(0,0,0,.45)',
                                        type: 'dashed' // 坐标轴虚线
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                                    },
                                }
                            },
                            {
                                type: 'value',
                                axisLabel: {
                                    formatter:  (val) => {
                                        return numFormat(val)
                                    }
                                },
                                axisLine: {
                                    lineStyle:{
                                        color: 'rgba(0,0,0,.45)',
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                                    },
                                }
                            }
                        ],
                        series: [
                            {
                                symbol: 'none',
                                name: 'Likes',
                                type: 'line',
                                data: data.map(item => item.likes)
                            },
                            {
                                symbol: 'none',
                                name: 'Reviews',
                                type: 'line',
                                data: data.map(item => item.reviews)
                            },
                            {
                                name: 'Posts',
                                type: 'bar',
                                yAxisIndex: 1,
                                <#if isMobile == false>
                                barWidth: 24,
                                <#else>
                                barWidth: 8,
                                </#if>
                                data: data.map(item => item.posts)
                            }
                        ]
                    }
                    chart.setOption(option)
                } else {
                    showNoDataImg(wrap, {
                        isECharts: true
                    })
                }

            }
            wrap.hideLoading()
        })
    }
    function getMedia() {
        productParam.dayType = dayType
        const wrap = document.getElementById('mediaList')
        const inner = wrap.querySelector('.grid-list__inner')
        getGridList({
            loadingElement: wrap,
            url: '/ins/brand/media',
            params: productParam,
            listWrap: inner,
            footerElement: wrap.querySelector('.grid-list__footer'),
            listDomFunc: item => {
                let str = ''
                str += '<div class="grid-item" data-id="' + item.id + '" data-shortcode="'+ item.shortcode +'">' +
                            '<div class="cover">' +
                                '<img src="' + getImage(item.displayUrl, IMAGE_TYPE.MEDIA, IMAGE_SIZE.MIDDLE) + '" alt="cover">'
                if(item.isVideo) {
                    if(item.productType === 'feed') {
                        str += '<i class="iconfont iconinsvideo-16px"></i>'
                    } else if(item.productType === 'clips') {
                        str += '<i class="iconfont iconinstagram-reels"></i>'
                    } else {
                        str += '<i class="iconfont iconigtv"></i>'
                    }
                } else {
                    str += '<i class="iconfont iconMultiPhoto-16px"></i>'
                }
                        str += '<div class="bottom">' +
                                    '<div class="left">' +
                                    '<i class="iconfont iconhuo"></i>' + numFormat(item.score) +
                                    '</div>'
                        if(item.isSponsored) {
                            str += '<div class="right">Sponsored</div>'
                        }
                str += '</div>' +
                        '</div>' +
                        '<div class="data-list">' +
                        '<div class="data-item">' +
                        '<div class="title">Likes</div>' +
                        '<div class="sub-title">' + numFormat(item.likes) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="title">Reviews</div>' +
                        '<div class="sub-title">' + numFormat(item.reviews) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="title">ER</div>' +
                        '<div class="sub-title">' + numFormat(item.er * 100) + '%</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                return str
            },
            otherEvent: () => {
                mediaWrap.querySelectorAll('#mediaList .grid-item').forEach(item => {
                    item.addEventListener('click', () => {
                        const id = item.getAttribute('data-id')
                        const shortcode = item.getAttribute('data-shortcode')
                        openDetail(id,shortcode)
                    })
                })
            }
        })
    }

    function showFilter() {
        const filter = mediaWrap.querySelector('.filter-wrap')
        // const parentTop = getElementPosition(document.querySelector('.tab-wrap')).top
        const scrollTop = getScroll().top
        // const filterTop = scrollTop - parentTop
        filter.style.top = scrollTop + 'px'
        if(gugeeOS.isIPhone) {
            filter.style.height = 'calc(100vh - 115px)'
        }
        showMask({
            event: () => {
                hideFilter()
            }
        })
        filter.show('flex')
    }
    function hideFilter() {
        const filter = mediaWrap.querySelector('.filter-wrap')
        filter.hide()
        hideMask()
    }
    function filterClear(){
        document.querySelectorAll('.select-item .btn-select-item').forEach(item => {
            item.classList.remove('is-active')
        })
        document.querySelectorAll('.select-item .btn-select-item:first-child').forEach(item => {
            item.classList.add('is-active')
        })
        document.querySelectorAll('#mediaAccount .gd-checkbox input[type="checkbox"]').forEach(item => {
            item.checked = false
        })
    }
    function filterSearch() {
        productParam.page = 1
        getProduct()
        hideFilter()
    }
</script>